<template>
	<view class="container" :style="{height:height}">
		<view class="constitution">
			<view class="top">
				<image mode="widthFix" :src="url+news[0].img_url"></image>
			</view>
			<view class="title">{{news[0].news_title}}</view>
			<view class="description">{{news[0].source}}</view>
			<view class="content">
				<rich-text :nodes="news[0].content"></rich-text>
			</view>
			
		</view>
		<view class="sort_title">
			<view class="title_name">推荐商品</view>
			<!-- <image class="more" src="../../static/images/more.png"></image> -->
		</view>
		<view class="goods_list">
			<view class="goods_unit" v-for="(item,index) in result" :key="index" :id="item.goods_id" v-on:click="goods_detail">
				<image class="goods_unit_pic" :style="{height:pic_h}" mode="aspectFill" :src="url+item.imgurl"></image>
				<view class="goods_name">{{item.goods_name.substr(0,9)}}…</view>
				<!-- <view class="sub_goods_name">{{item.title.substr(0,11)}}…</view> -->
				<view class="goods_property">
					<view class="goods_price">￥{{item.price}}</view>
				</view>
				<view class="goods_property">
					<view class="old_price">￥{{item.price}}</view>
					<view class="goods_cash">销量：{{item.sum}}</view>
				</view>
				<view class="goods_commsion" v-if="item.commission!=0">
					<view class="commission_name">佣金</view>
					<view class="commission_price">￥{{item.commission}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
	
	page,.container{width: 100%;background: #F5F5F5;}
	.constitution{width:100%;background-image: url("https://zhangjie.jdmuguzhid.com/static/images/yztang/bg1.png");background-size: 100% auto;
	background-repeat: no-repeat;padding-bottom: 30upx;}
	.top{width:100%;display: flex;justify-content: center;align-items: center;}
	.top image{width:200upx;}
	.title{width:100%;line-height: 50upx;text-align: center;font-size: 36upx;font-weight: bold;}
	.description{width:68%;margin:10upx 15% 60upx 15%;background: #5beace;border-radius: 20upx;padding:15upx 2%;line-height: 50upx;font-size:28upx;}
	.content{width:86%;margin:30upx 5% 10upx 5%;background: #FFFFFF;border-radius: 20upx;padding:15upx 2%;line-height: 50upx;font-size:28upx;}
	/*****************************/
	.goods_list{width:94%;margin:10upx 3%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.goods_unit{width:48.5%;background: #FFFFFF;/* box-shadow: 0px 0px 6px #ccc; */margin:20upx 0;display: flex;border-radius: 10upx;overflow:hidden;
	            flex-direction: column;justify-content: space-between;align-items: flex-start;padding-bottom: 10upx;}
	.goods_unit_pic{width:100%;overflow:hidden;}
	.goods_name{width:96%;padding:0 2%;line-height: 40upx;font-size: 28upx;color: #282828;}
	.sub_goods_name{width:96%;padding:0 2%;line-height: 35upx;font-size: 26upx;color:#AAAAAA;}
	.goods_property{width:96%;padding:0 2%;display: flex;justify-content: space-between;align-items: center;height: 40upx;background: #FFFFFF;}
	.goods_price{font-size: 36upx;color: #f40601;}
	.old_price,.goods_cash{font-size: 24upx;color: #AAAAAA;}
	.old_price{text-decoration: line-through;}
	.goods_property image{width:50upx;height: 50upx;}
	.goods_commsion{margin-left:2%;width:55%;display: flex;justify-content: space-between;align-items: center;height: 40upx;border-radius:10upx;overflow: hidden;}
	.commission_name{width:50%;line-height: 40upx;height:40upx;font-size:28upx;background:#ef3d19;color: #ffffff;text-align: center;}
	.commission_price{width:50%;line-height: 40upx;height:40upx;font-size:26upx;background:#ffece8;color: #ef3d19;text-align: center;}
	/*****************************/
	.sort_title{width:92%;margin:0 2%;padding:10upx 2%;display: flex;justify-content: space-between;align-items: center;
	height: 50upx;border-bottom: 1px solid #F1F1F1;}
	.title_name{font-size: 28upx;color: #282828;font-weight: bold;}
	.more{width:40upx;height: 40upx;}
</style>

<script>
	export default {
		data() {
			return {
				pic_h:"",
				news:[],
				result:[],
				height:'',
				id:0,
				start:0,
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w   = res.windowWidth;
			this.height = res.windowHeight+"px";
			this.pic_h = w*0.94*0.485+"px";
			this.id = e.id;
		},
		onShow()
		{
			this.initialize();
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage(res) {
			var member_id = uni.getStorageSync("member_id");
			var title       = '谷牧之道-'+this.news[0].news_title;
			var imgurl      = this.news[0].img_url;
			return {
			  title: title,
			  path: '/pages/mall/constitution_detail?id='+this.news[0].news_id,
			  imageUrl:imgurl
			}
		},
		onShareTimeline(res)
		{
			var title       = '谷牧之道-'+this.news[0].news_title;
			var imgurl      = this.news[0].img_url;
			return {
			  title: title,
			  query: 'id='+this.news[0].news_id,
			  imageUrl:imgurl
			}
		},
		//#endif
		onReachBottom:function()
		{
			this.initialize();
		},
		methods: {
			goods_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"../mall/goods_detail?id="+id
				})
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				//#ifdef H5
				var type = "app";
				//#endif
				uni.request({
					url: this.url+'/wechat_news_detail', 
					data: {id:this.id,member_id:member_id,type:type,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						that.news = res.data.news;
						if(res.data.status==1)
						{
							that.start+=6;
							for(var i=0;i<res.data.result.length;i++)
							{
								that.result.push(res.data.result[i]);
							}
						}
					}
				});
			}
		}
	}
</script>